<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>中国地图</title>
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <script src="shine.js"></script>
    <script src="dark.js"></script>
    <script src="vintage.js"></script>
    <script src="macarons.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #main {
      margin: 0 auto;
      width: 100vw;
      height: 100vh;
    }
    body {
      background: black;
    }
  </style>
  <body>
    <div id="main"></div>
  </body>
  <script>
    function randomData() {
      return Math.round(Math.random() * 500);
    }
    var mydata = [
      { name: "北京", value: randomData() },
      { name: "天津", value: randomData() },
      { name: "上海", value: randomData() },
      { name: "重庆", value: randomData() },
      { name: "河北", value: randomData() },
      { name: "河南", value: randomData() },
      { name: "云南", value: randomData() },
      { name: "辽宁", value: randomData() },
      { name: "黑龙江", value: randomData() },
      { name: "湖南", value: randomData() },
      { name: "安徽", value: randomData() },
      { name: "山东", value: randomData() },
      { name: "新疆", value: randomData() },
      { name: "江苏", value: randomData() },
      { name: "浙江", value: randomData() },
      { name: "江西", value: randomData() },
      { name: "湖北", value: randomData() },
      { name: "广西", value: randomData() },
      { name: "甘肃", value: randomData() },
      { name: "山西", value: randomData() },
      { name: "内蒙古", value: randomData() },
      { name: "陕西", value: randomData() },
      { name: "吉林", value: randomData() },
      { name: "福建", value: randomData() },
      { name: "贵州", value: randomData() },
      { name: "广东", value: randomData() },
      { name: "青海", value: randomData() },
      { name: "西藏", value: randomData() },
      { name: "四川", value: randomData() },
      { name: "宁夏", value: randomData() },
      { name: "海南", value: randomData() },
      { name: "台湾", value: randomData() },
      { name: "香港", value: randomData() },
      { name: "澳门", value: randomData() },
      { 
        name: "南海诸岛", 
        value: 0,
         itemStyle: { normal: { opacity: 0 } } ,
         normal:{opacity:0,label:{show:false},borderWidth:"0",borderColor:"#10242b",areaStyle:{color:'#10242b'}}
      }
    ];
    var mydata1 = [
      { name: "北京", value: randomData() },
      { name: "天津", value: randomData() },
      { name: "上海", value: randomData() },
      { name: "重庆", value: randomData() },
      { name: "河北", value: randomData() },
      { name: "河南", value: randomData() },
      { name: "云南", value: randomData() },
      { name: "辽宁", value: randomData() },
      { name: "黑龙江", value: randomData() },
      { name: "湖南", value: randomData() },
      { name: "安徽", value: randomData() },
      { name: "山东", value: randomData() },
      { name: "新疆", value: randomData() },
      { name: "江苏", value: randomData() },
      { name: "浙江", value: randomData() },
      { name: "江西", value: randomData() },
      { name: "湖北", value: randomData() },
      { name: "广西", value: randomData() },
      { name: "甘肃", value: randomData() },
      { name: "山西", value: randomData() },
      { name: "内蒙古", value: randomData() },
      { name: "陕西", value: randomData() },
      { name: "吉林", value: randomData() },
      { name: "福建", value: randomData() },
      { name: "贵州", value: randomData() },
      { name: "广东", value: randomData() },
      { name: "青海", value: randomData() },
      { name: "西藏", value: randomData() },
      { name: "四川", value: randomData() },
      { name: "宁夏", value: randomData() },
      { name: "海南", value: randomData() },
      { name: "台湾", value: randomData() },
      { name: "香港", value: randomData() },
      { name: "澳门", value: randomData() },
      { 
        name: "南海诸岛", 
        value: 0,
         itemStyle: { normal: { opacity: 0 } } ,
         normal:{opacity:0,label:{show:false},borderWidth:"0",borderColor:"#10242b",areaStyle:{color:'#10242b'}}
      }
    ];
    var optionMap = {
      title: {
        text: "全国地图大数据",
        subtext: "222222222",
        x: "center"
      },
      // 显示悬浮框
      tooltip: {
        trigger: "item",
        formatter: function(params) {
          // 定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
          var res = params.name + "<br />";
          // 定义一个变量来保存series数据系列
          var myseries = optionMap.series;
          // 循环遍历series数据系列
          for (var i = 0; i < myseries.length; i++) {
            // 在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
            for (var k = 0; k < myseries[i].data.length; k++) {
              // 如果data数据中的name和地区名称一样
              if (myseries[i].data[k].name == params.name) {
                // 将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                res +=
                  myseries[i].name + ":" + myseries[i].data[k].value + "<br />";
              }
            }
          }
          //返回res
          //console.log(res);
          return res;
        }
      },
      // 左边图标
      visualMap: {
        min: 0,
        max: 1000,
        text: ["高", "低"],
        realtime: true,
        calculable: true,
        inRange: {
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea"
          ]
        },
        textStyle: {
          color: "black"
        }
      },
      series: [
        {
          name: "刷单量",
          type: "map", // 图标类型
          coordinateSystem: "bmap",
          mapType: "china", // 图标省份，哪一个省份就写省份名称
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          roam: true, // 是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          label: {
            normal: {
              show: true, // 是否显示默认名称
              textStyle: {
                color: "black"
              }
            },
            emphasis: {
              show: true // 鼠标悬浮是否显示默认地理名称
            }
          },
          data: mydata
        },
        {
          name: "接单量",
          type: "map", // 图标类型
          coordinateSystem: "bmap",
          mapType: "china", // 图标省份，哪一个省份就写省份名称
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          roam: true, // 是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          label: {
            normal: {
              show: true // 是否显示默认名称
            },
            emphasis: {
              show: true // 鼠标悬浮是否显示默认地理名称
            }
          },
          data: mydata1
        }
      ]
    };
    var myChart = echarts.init(document.getElementById("main"), "vintage");
    myChart.setOption(optionMap);
  </script>
</html>
